<template>
  <div id="tags-view-container" class="tags-view-container">
    <router-link
      v-for="tag in visitedViews"
      ref="tag"
      tag="span"
      :key="tag.path"
      :class="isActive(tag) ? 'active' : ''"
      :to="{ path: tag.path, query: tag.query, fullPath: tag.fullPath }"
      class="tags-view-item"
    >
      {{ tag.meta.title }}
      <span v-if="!isAffix(tag)" :class="isActive(tag) ? 'close-icon' : ''"><close-outlined /></span>
    </router-link>
  </div>
</template>
<script>
import { computed, defineComponent, onMounted, ref, watch } from 'vue';
import { useRoute } from 'vue-router';
import { useStore } from 'vuex';
import path from 'path';
import { CloseOutlined } from '@ant-design/icons-vue';

export default defineComponent({
  components: {
    CloseOutlined,
  },
  props: {},
  setup() {
    const affixTags = ref(null);
    const curRoute = useRoute();
    const store = useStore(); // useStore()方法创建store对象，相当于src/store/index.js中的store实例对象

    watch(
      () => curRoute.path,
      (value) => {
        addTag();
      }
    );

    const visitedViews = computed(() => {
      return store.getters.visitedViews;
    });
    const routes = computed(() => {
      return store.getters.routes;
    });

    const isActive = (route) => {
      return route.path === curRoute.path;
    };

    const isAffix = (tag) => {
      return tag.meta && tag.meta.affix;
    };

    const filterAffixTags = (routes, basePath = '/') => {
      let tags = [];
      routes.forEach((route) => {
        if (route.meta && route.meta.affix) {
          const tagPath = path.resolve(basePath, route.path);
          tags.push({
            fullPath: tagPath,
            path: tagPath,
            name: route.name,
            meta: { ...route.meta },
          });
        }
        if (route.children) {
          const tempTags = filterAffixTags(route.children, route.path);
          if (tempTags.length >= 1) {
            tags = [...tags, ...tempTags];
          }
        }
      });
      return tags;
    };

    const initTag = () => {
      const affixTag = filterAffixTags(routes.value);
      for (const tag of affixTag) {
        if (tag.name) {
          store.dispatch('tagsView/addVisitedView', tag);
        }
      }
    };

    const addTag = () => {
      const { name } = curRoute;
      if (name) {
        store.dispatch('tagsView/addView', curRoute);
      }
      return false;
    };

    onMounted(() => {
      initTag();
      addTag();
    });

    return {
      routes,
      visitedViews,
      isActive,
      isAffix,
    };
  },
});
</script>
<style lang="less" scoped>
.tags-view-container {
  height: 34px;
  width: 100%;
  line-height: 34px;
  background: #fff;
  border-bottom: 1px solid #d8dce5;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 0 3px 0 rgba(0, 0, 0, 0.04);
  z-index: 1000;
  .tags-view-item {
    display: inline-block;
    border-radius: 2px;
    cursor: pointer;
    height: 26px;
    line-height: 26px;
    border: 1px solid #d8dce5;
    color: #495060;
    background: #fff;
    padding: 0 8px;
    font-size: 12px;
    margin-left: 5px;
    margin-top: 4px;

    &.active {
      // #42b983
      background-color: #1890ff;
      color: #fff;
      border-color: #1890ff;
      &::before {
        content: '';
        background: #fff;
        display: inline-block;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        position: relative;
        margin-right: 2px;
      }
    }

    .close-icon:hover {
      border-radius: 100%;
      border: 1px solid #495060;
      background: #495060;
    }
  }
}
</style>
